<template>
	<view class="PagesIndex">
		<view class="search-top box-sizing dis"
			:style="{ paddingTop: `${getSystemInfo.statusBarTop}rpx`, height: `${getSystemInfo.statusBarHeight}rpx` }"
			:class="{'search-opacity':scrollTop>0}">
			<image class="tx-img" src="@/static/img/lhfp.png" mode=""></image>
		</view>
		<view class="pages-backs"></view>
		<view class="neighbor por" :style="{ paddingTop: `${getSystemInfo.statusBarTop}rpx` }">
			<view class="por">
				<view class="prohibit width-height100 poa app-bottom-left"></view>
				<swiper class="swiper" :disable-touch="true" :current="neiIndex"
					@change="$event => neiIndex = $event.detail.current">
					<swiper-item v-for="(item,index) in bannerList" :key="index">
						<image class="width-height100" :src="item.bannerUrl" mode="widthFix"></image>
					</swiper-item>
				</swiper>
				<view class="pricing-index poa" @click="staShow = true"></view>
			</view>
			<view class="content f-background">
				<view class="neighbor-title color">
					<view class="title dis" :class="neiIndex == 0 ? 'font-weight-600' : 'color2 font-weight-400'"
						@click="neiIndex = 0">
						<image class="title-icon poa app-left" v-if="neiIndex == 0" src="@/static/img/sk.png" mode="">
						</image>
						<text class="size-34 font-weight por">代取快递</text>
					</view>
					<view class="title dis" :class="neiIndex == 1 ? 'font-weight-600' : 'color2 font-weight-400'"
						@click="neiIndex = 1">
						<image class="title-icons poa app-right" v-if="neiIndex == 1" src="@/static/img/sk.png" mode="">
						</image>
						<text class="size-34 font-weight por">代买商品</text>
					</view>
				</view>
				<view class="station-height dis-cen" @click="onJumpPage('editAddress')">
					<view class="dis-ali">
						<image class="con-icon" src="@/static/icon/song.png" mode=""></image>
						<view v-if="addsData.id">
							<view class="font-weight-600 color2 size-30 margin-bottom-20">
								{{addsData.addrType*1 == 1 ? addsData.communityName : addsData.addressInfo}}{{addsData.houseNumber}}
							</view>
							<view class="font-weight-400 color6 size-26">
								{{addsData.consignee}}{{addsData.sex == 1?'先生':'女士'}} {{addsData.telephone}}
							</view>
						</view>
						<view class="font-weight-400 color2 size-30" v-else>请选择小区</view>
					</view>
					<text class="iconfont icon-a-lujing4332biankuang color6 size-28"></text>
				</view>
				<view class="station dis-cen" @click="onJumpPage('addCourier')" v-if="neiIndex == 0">
					<view class="name-width dis-ali">
						<image class="con-icon" src="@/static/icon/qu.png" mode=""></image>
						<view class="font-weight-600 color2 size-36" v-if="!paramsForm.pickupPkgList.length">请选择驿站
						</view>
						<view class="font-weight-600 color2 size-30 box" v-else>
							<text v-for="(item,index) in paramsForm.pickupPkgList" :key="index">
								{{item.siteName}}
								<text
									v-if="item.pickUpPkgType == 3">{{item.list[0].pkgNumber.split(',').length}}张</text>
								<text v-else>{{item.list.length}}件</text>
								<text v-if="index != paramsForm.pickupPkgList.length-1">、</text>
							</text>
						</view>
					</view>
					<text class="iconfont icon-a-lujing4332biankuang color6 size-28"></text>
				</view>
				<view class="purchasing" v-else>
					<u-textarea v-model="paramsForm.bodyTxt" class="textarea" maxlength="100"
						placeholder="帮你买点什么，例：早餐，奶茶，药品，烟酒等，由跑腿员先垫付后结算"></u-textarea>
					<view class="upload-file">
						<u-upload :fileList="fileList" @afterRead="afterRead" @delete="onDeletePicImg" multiple
							:maxCount="4">
							<image class="upload-img" src="@/static/img/jias.png" mode=""></image>
						</u-upload>
					</view>
				</view>
				<u-button type="primary"
					:customStyle="{width: '662rpx',height: '110rpx',borderRadius: '22rpx',margin: '0 auto',borderRadius: '24rpx'}"
					:color="settings.color" @click="onOrderNow">
					<text class="color-f font-weight-600 size-34">立即下单</text>
				</u-button>
			</view>
			<view class="gradient" v-if="infoDataIndex.totalGoodsCount*1 && neiIndex == 1"></view>
			<!--  v-if="list.length" -->
			<!-- <u-sticky :offset-top="" v-show="infoDataIndex.totalGoodsCount*1"> -->
			<view class="navig" :style="{top: `${getSystemInfo.statusBarHeight}rpx`}"
				v-if="infoDataIndex.totalGoodsCount*1 && neiIndex == 1">
				<view class="navig-title text-align">
					<view class="size-36 width-height100 dis color-8"
						@click="params.dataBean.goodsType = 1,postGetIndexExpress(1),loading=true">
						<text :class="{'color3 font-weight-600':params.dataBean.goodsType == 1}">团长推荐</text>
					</view>
					<view class="strip" v-if="params.dataBean.goodsType == 1"></view>
				</view>
				<view class="navig-title text-align">
					<view class="size-36 width-height100 dis color-8"
						@click="params.dataBean.goodsType = 2,postGetIndexExpress(1),loading=true">
						<text :class="{'color3 font-weight-600':params.dataBean.goodsType == 2}">粮油调味</text>
					</view>
					<view class="strip" v-if="params.dataBean.goodsType == 2"></view>
				</view>
			</view>
			<!-- </u-sticky> -->
			<!-- 			<mescroll-body @init="mescrollInit" @down="$event=>$event.resetUpScroll(false)"
				@up="$event=> postGetIndexExpress($event.num)" :toTop="{width: '100px',height: '100px'}"
				:down="{auto: false}" :up="{auto: false, textNoMore: '-我也是有底线滴-',empty:{use:false}}"> -->
			<view class="goods" v-if="infoDataIndex.totalGoodsCount*1 && neiIndex == 1">
				<view class="goods-for f-background por" v-for="(item,index) in list" :key="index">
					<u-skeleton rows="0" :loading="loading" avatar avatarSize="344rpx" :title="false">
						<u--image width="344rpx" height="344rpx" :src="item.goodsUrl || 1"
							@click="onJumpPage('goodDetails','id',item.id,)">
							<image slot="error" class="width-height100 f-background" src="@/static/default/default.png"
								mode=""></image>
							<!-- <view slot="error" class="width-height100 f-background dis size-32">加载失败</view> -->
						</u--image>
					</u-skeleton>
					<view class="goods-com" :class="{'border-top':index != 0}"
						@click="onJumpPage('goodDetails','id',item.id,)">
						<u-skeleton rows="4" :loading="loading" :rowsWidth="['300rpx','246rpx','76rpx','162rpx']"
							:rowsHeight="['32rpx','24rpx','30rpx','28rpx']" :title="false">
							<view class="goods-name box font-weight-600 color2 size-34">{{item.goodsName ||'国泰味精'}}
							</view>
							<view class="goods-shou font-weight-400 size-26 color-8">
								买贵了包退丨已售{{item.goodsSales || 0}}
							</view>
							<view class="goods-chaos color">
								<text class="font-weight-400 size-26">超低价</text>
								<text class="size-38 font-weight-600">
									<text class="size-24">¥</text>{{item.goodsAmount || 0}}
								</text>
							</view>
							<view class="flex">
								<view class="goods-par font-weight-600 size-22">
									送<text class="size-24"> {{item.goodsAmount || 0}} </text>豆
								</view>
							</view>
						</u-skeleton>
					</view>
					<view class="number-box poa dis text-align background" v-if="!loading" @click="onAddCart(index)">
						<text class="iconfont icon-jia2 color-f size-42 font-weight"></text>
						<view class="min-widths poa dis background radius100" v-if="item.goodsCount">
							<text class="color-f size-20">{{item.goodsCount}}</text>
						</view>
						<!-- 						<u-number-box disabledInput v-model="item.goodsCount"
								@change="onAddCart($event,item)"></u-number-box> -->
						<!-- 						<button class="u-number-box__minus dis" @click="onDelCart(index)" v-show="item.goodsCount">
								<text class="iconfont icon-jian size-28 color"></text>
							</button>
							<input disabled type="text" class="u-number-box__input" v-model="item.goodsCount"
								v-if="item.goodsCount" />
							<button class="u-number-box__plus dis" @click="onAddCart({index})">
								<text class="iconfont icon-jia size-28 color-f"></text>
							</button> -->
						<!-- 					<XmBezierCart width="30rpx" height="30rpx" direction="bottom" :index="index" :num="num"
								@click="onAddCart($event,index)">
							</XmBezierCart> -->
					</view>
				</view>
			</view>
			<view class="default dis"
				v-if="!list.length && !loading && infoDataIndex.totalGoodsCount*1 && neiIndex == 1">
				<text class="color9 size-30">暂无商品信息</text>
			</view>
			<!-- </mescroll-body> -->
		</view>
		<view class="carts dis por"
			@click="onJumpPage('shoppingCart','type',params.dataBean.goodsType,infoDataIndex.totalGoodsCount*1)"
			v-if="infoDataIndex.totalGoodsCount*1 && neiIndex == 1">
			<view class="carts-num background dis poa" v-if="infoDataIndex.goodsCount*1">
				<text class="font-weight-600 color-f size-22">
					{{infoDataIndex.goodsCount*1 > 99 ? '99+' : infoDataIndex.goodsCount}}
				</text>
			</view>
			<text class="iconfont icon-gouwuche color2 por" :class="{'swings':swingsBool}"></text>
		</view>
		<!-- 隐私政策 -->
		<u-popup mode="center" round="26rpx" :show="privacyName" :safeAreaInsetBottom="false">
			<Privacy @close="privacyName = '',allFun()" />
		</u-popup>
		<!-- 服务收费标准 -->
		<u-popup mode="center" round="24rpx" :show="staShow" :safeAreaInsetBottom="false">
			<PricingRules @gotIt="staShow = false" />
		</u-popup>
		<!-- 弹窗提示 -->
		<view class="welfare pof dis" v-if="infoDataIndex.loginImg" @click="infoDataIndex.loginImg=''">
			<image class="welfare-img" :src="infoDataIndex.loginImg" mode="widthFix"></image>
			<image class="close" src="@/static/icon/guanli.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	const url = {
		addCourier: '/packageReplace/add-courier/add-courier', // 驿站信息
		editAddress: '/packagePerson/address/edit-address', // 添加地址
		paymentResults: '/packageOrder/payment-results/payment-results', // 帮忙支付结果页面
		shoppingCart: '/packageReplace/shopping-cart/shopping-cart', // 购物车
		logon: '/packagePerson/logon/logon', // 登录
		goodDetails: '/packageReplace/current-lives/good-details', // 商品详情
	}
	import Default from "@/components/default/default"
	import XmBezierCart from '@/components/xm-bezier-cart/xm-bezier-cart.vue';
	import { GetOrderList, CreateOrder, PickupPkgOrder, GetIndexExpress, AddUpdGoodsCart } from "@/api/index"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { settings } from "@/utils/public"
	import Privacy from "@/components/privacy/privacy"
	import PricingRules from "@/components/pricing-rules/pricing-rules"
	import { getSystemInfo, MultipassUpload, getLocation } from '@/utils/index';
	export default {
		components: { Privacy, XmBezierCart, PricingRules, Default },
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				staShow: false,
				swingsBool: false,
				loading: true,
				borderIndex: -1,
				settings,
				neiIndex: 0,
				getSystemInfo: getSystemInfo(), // 顶部自定义导航数据
				privacyName: '',
				scrollTop: 0,
				list: [],
				infoDataIndex: {}, // 所有数据
				bannerList: [], // 轮播数据
				fileList: [],
				tokenBool: '',
				params: {
					size: 2, // 	每页显示条数
					current: 1, // 当前页
					dataBean: {
						communityId: 0, // 社区id
						longitude: 0,
						latitude: 0,
						goodsType: 1, // 1.团长 2.商品粮油
					}
				},
				totalCount: 0,
				addsData: {}, // 地址信息
				paramsForm: {
					addressId: 0, // 地址id
					bodyImg: '', // 代买图片
					bodyTxt: '', // 代买内容
					pickupPkgList: [], // 取件下单
				}
			}
		},
		onShareAppMessage(res) {
			let userInfo = uni.getStorageSync('userInfo')
			return {
				title: '代取快递丨买商品丨免费跑腿', //
				path: `/pages/pages/index?superiorId=${userInfo.uid || 0}`, //
				imageUrl: '../../static/img/fx.png',
				mpId: appId, //此处配置微信小程序的AppId
			};
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		onLoad(options) {
			if (options.superiorId * 1) uni.setStorageSync('superiorId', options.superiorId)
		},
		async onShow() {
			await this.$onLaunched;
			this.privacyName = uni.getStorageSync('privacyContractName')
			if (this.privacyName) {
				uni.hideTabBar({
					animation: false, // 是否需要动画效果，默认为true
					success() {},
					fail() {}
				});
			}
			this.allFun()
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			const { totalCount, list, params } = this;
			if (list.length < totalCount) this.postGetIndexExpress(params.current + 1);
		},
		methods: {
			async allFun() {
				console.log('onshow执行')
				this.tokenBool = uni.getStorageSync('userInfo').mobile
				if (!this.privacyName) {
					if (!uni.getStorageSync('location').latitude) await getLocation()
				}
				if (!this.privacyName) uni.showTabBar({})
				// 地址信息部分
				this.addsData = uni.getStorageSync('addsData')
				this.paramsForm.pickupPkgList = uni.getStorageSync('paramsList')
				this.paramsForm.addressId = uni.getStorageSync('addsData').id
				// if (this.paramsForm.addressId) 
				this.postGetIndexExpress(1) // 重置列表数据为第一页
				// this.mescroll.resetUpScroll() // 重置列表数据为第一页
				// this.canReset = true // 过滤第一次的onShow事件
			},
			// 列表数据
			async postGetIndexExpress(page) {
				this.params.dataBean.communityId = this.addsData.communityId || 0
				this.params.dataBean.longitude = uni.getStorageSync('location').longitude || 0
				this.params.dataBean.latitude = uni.getStorageSync('location').latitude || 0
				this.params.current = page || 1
				// this.loading = true
				const { code, data } = await GetIndexExpress(this.params)
				const _this = this
				if (code == "200") {
					console.log('data', data)
					this.bannerList = data.bannerList
					this.infoDataIndex = data
					this.list = page == 1 ? data.goodsInfoPage.records : this.list.concat(data
						.goodsInfoPage.records); //追加新数据
					this.totalCount = data.goodsInfoPage.total
					setTimeout(() => {
						_this.loading = false
						// _this.mescroll.endByPage(data.goodsInfoPage.records.length, data.goodsInfoPage
						// 	.total); //必传参数(当前页的数据个数, 总页数)
					}, 500)
				}
			},
			// 代买商品
			async postCreateOrder() {
				const _this = this
				const { data, code } = await CreateOrder(this.paramsForm)
				if (code == '200') {
					for (let i in this.paramsForm) {
						if (i != 'addressId') this.paramsForm[i] = ''
					}
					this.fileList = []
					// uni.removeStorageSync('addsData');
					if (data.paySign) {
						uni.requestPayment({
							provider: 'wxpay',
							nonceStr: data.nonceStr,
							timeStamp: String(data.timestamp),
							package: data.packageStr,
							signType: 'MD5',
							paySign: data.paySign,
							success(res) {
								_this.onJumpPage('paymentResults', 'id', data.orderNo)
							},
							fail(res) {
								_this.disabled = false
								console.log(_this.disabled)
								console.log('res', res)
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								});
							},
						})
					} else this.onJumpPage('paymentResults', 'id', data.orderNo)
				}
			},
			// 取件下单
			async postPickupPkgs() {
				const _this = this
				const { data, code } = await PickupPkgOrder(this.paramsForm)
				if (code == '200') {
					console.log(data, 'datatatatta')
					if (data.paySign) {
						uni.requestPayment({
							provider: 'wxpay',
							nonceStr: data.nonceStr,
							timeStamp: String(data.timestamp),
							package: data.packageStr,
							signType: 'MD5',
							paySign: data.paySign,
							success(res) {
								_this.handleData(data)
							},
							fail(res) {
								_this.disabled = false
								console.log(_this.disabled)
								console.log('res', res)
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								});
							},
						})
					} else this.handleData(data)
				}
			},
			// 处理数据
			handleData(data) {
				for (let i in this.paramsForm) {
					if (i != 'addressId') this.paramsForm[i] = ''
				}
				this.fileList = []
				this.paramsForm.pickupPkgList = []
				uni.removeStorageSync('paramsList');
				this.onJumpPage('paymentResults', 'id', data.orderNo)
			},
			// 上传图片
			async afterRead(e) {
				const url = await MultipassUpload(e.file, 3, this.fileList)
				this.fileList = url
				console.log('this.fileList', this.fileList)
			},
			// 点击立即下单
			onOrderNow() {
				if (!this.tokenBool) { // 未登录
					this.onJumpPage('logon')
					return
				}
				const { paramsForm, fileList } = this
				let tis = ''
				if (!paramsForm.addressId) tis = "请选择小区"
				else if (this.neiIndex == 0 && !paramsForm.pickupPkgList.length) tis = "请选择驿站信息"
				else if (!paramsForm.bodyTxt && this.neiIndex != 0) tis = "请填写代买商品信息"
				else if (!/^.{1,100}$/.test(paramsForm.bodyTxt) && this.neiIndex != 0) tis = "长度100以内"
				if (tis) {
					this.showToast(tis)
					return
				}
				if (this.neiIndex != 0) {
					if (fileList.length) {
						let listImg = []
						fileList.map(res => {
							listImg.push(res.url)
						})
						this.paramsForm.bodyImg = listImg.join(',')
					}
					this.postCreateOrder() // 代买商品
				} else this.postPickupPkgs() // 取件下单
			},
			// 修改购物车数据
			async postAddUpdGoodsCart(id, num, index) {
				const carts = {
					isDel: !num ? 1 : 0,
					goodsId: id,
					goodsCount: num,
					communityId: this.addsData.communityId
				}
				const { data, code } = await AddUpdGoodsCart(carts)
				if (code == '200') {
					// if (name == 'del') {
					// 	this.infoDataIndex.goodsCount = this.infoDataIndex.goodsCount - 1
					// 	this.list[index].goodsCount = this.list[index].goodsCount - 1
					// } else {
					this.infoDataIndex.goodsCount = this.infoDataIndex.goodsCount + 1
					this.list[index].goodsCount = this.list[index].goodsCount + 1
					// }
				}
			},
			// 添加购物车数据
			onAddCart(index) {
				console.log('list', index)
				let data = this.list[index]
				// let nums = 0
				const _this = this
				if (this.swingsBool) return
				console.log('data.goodsCount', data)
				if (data.goodsCount * 1 + 1 > data.stock * 1) {
					this.showToast('已经达到最大库存')
					return
				}
				// console.log('data.goodsCount',data)
				_this.swingsBool = true
				setTimeout(() => {
					_this.swingsBool = false
				}, 500)
				// console.log('data',data.goodsCount)
				this.postAddUpdGoodsCart(data.id, data.goodsCount * 1 + 1, index)
			},
			// 删除数量
			onDelCart(e) {
				console.log(e)
				const data = this.list[index]
				this.postAddUpdGoodsCart(data.id, data.goodsCount * 1 - 1, index, 'del')
			},
			showToast(name, icon) {
				uni.showToast({
					title: name,
					duration: 2000,
					icon: icon || 'none'
				});
			},
			// 隐私协议
			// onPrivacy() {
			// 	this.privacyName = ''
			// 	this.allFun()
			// },
			// 删除
			onDeletePicImg({ index }) {
				console.log('index', index)
				this.fileList.splice(index, 1)
			},
			onJumpPage(name, parName, par, bools) {
				let urlData = url[name]
				if (par) urlData = `${urlData}?${parName}=${par}` // 有参数
				// const filterate = ['residential', 'currentLives']
				// if (!this.tokenBool && !filterate.includes(name)) urlData = '/packagePerson/logon/logon' // 未登录
				if (name == 'addCourier' && !this.paramsForm.addressId) {
					this.showToast('请先选择小区')
					return
				} else if (name == 'shoppingCart' && !this.tokenBool) { // 未登录
					this.onJumpPage('logon')
					return
				} else if (name == 'shoppingCart' && !bools) {
					this.showToast('您还没有添加商品哦')
					return
				}
				console.log('parNameparNameparName', parName)
				uni.navigateTo({
					url: urlData
				});
			}
		},
	}
</script>

<style lang="scss">
	.PagesIndex {
		width: 100%;

		.welfare {
			background: rgba(0, 0, 0, 0.5);
			width: 100%;
			height: 100vh;
			z-index: 1000;
			left: 0;
			top: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.welfare-img {
				width: 600rpx;
				height: 756rpx;
			}
		}







		.close {
			width: 54rpx;
			height: 54rpx;
			margin: 62rpx auto;
		}

		.number-box {
			width: 50rpx;
			height: 50rpx;
			border-radius: 18rpx 18rpx 18rpx 18rpx;

			.min-widths {
				min-width: 28rpx;
				height: 28rpx;
				border: 2px solid #FFFFFF;
				right: -18rpx;
				top: -18rpx;
				// padding: 8rpx;
				// box-sizing: border-box;
			}
		}

		.gradient {
			width: 710rpx;
			height: 500rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 57%);
			margin: 0 auto;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-top: 30rpx;
		}

		.default {
			margin: 140rpx 0 170rpx;


			// .default-dis {
			// 	width: 68rpx;
			// 	height: 1px;
			// 	background: rgba(153, 153, 153, 0.3);
			// }
		}

		::v-deep.mescroll-body {}

		.search-top {
			background: #EB0000;
			top: 0;
			z-index: 1000;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			transition: all .5s;
			opacity: 0;

			.tx-img {
				width: 216rpx;
				height: 45rpx;
			}
		}

		.search-opacity {
			opacity: 1;
		}

		// ::v-deep.u-skeleton__wrapper {
		// 	padding: 24rpx 0;
		// }

		.neighbor {
			z-index: 100;
			padding-bottom: 40rpx;

			.pricing-index {
				width: 160rpx;
				height: 50rpx;
				left: 40rpx;
				bottom: 51rpx;
				z-index: 102;
			}

			.prohibit {
				z-index: 101;
			}

			.swiper {
				width: 100%;
				height: 384rpx;
				// background: #000;
				touch-action: none;
			}

			.f-background25 {
				background: rgba(255, 255, 255, .25);
			}
		}

		.pages-backs {
			width: 100%;
			height: 720rpx;
			position: absolute;
			left: 0;
			top: 0;
			background: linear-gradient(180deg, #EB0000 40%, #F8F9FB 100%);
		}

		// 内容部分
		.content {
			margin: 0 20rpx;
			padding: 0 0 24rpx;
			box-sizing: border-box;
			border-radius: 24rpx;
			overflow: hidden;
			box-shadow: 0rpx 8rpx 16rpx 4rpx rgba(0, 0, 0, 0.03);

			.con-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 24rpx;
			}

			.station-height {
				height: 160rpx;
			}

			.station,
			.station-height {
				margin: 0 24rpx;
				padding: 0 12rpx 0 20rpx;
				box-sizing: border-box;
				border-radius: 24rpx;
			}

			.station {
				height: 116rpx;
				background: rgba(234, 235, 237, 0.8);
				margin-bottom: 40rpx;

				.name-width {
					width: 95%;
				}

				.box {
					width: 88%;
				}
			}

			.neighbor-title {
				background: #FFDDDD;
				display: grid;
				grid-template-columns: repeat(2, 1fr);

				.title {
					padding: 0 24rpx;
					height: 100rpx;
					position: relative;
					font-size: 36rpx;
				}

				.title-icon,
				.title-icons {
					width: 420rpx;
					height: 102rpx;
				}

				.title-icons {
					transform: scaleX(-1);
				}
			}
		}

		// 导航u部分
		.navig {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			// margin-bottom: 22rpx;
			// position: sticky;
			// z-index: 1000;
			margin-top: -500rpx;

			.navig-title {
				// height: 140rpx;
				// line-height: 140rpx;
				padding: 40rpx 0 84rpx;
			}

			.strip {
				width: 100rpx;
				height: 10rpx;
				// left: 50%;
				// bottom: 26rpx;
				margin: 24rpx auto 0;
				border-radius: 100rpx;

				background: linear-gradient(90deg, #FF4646 39%, #EB0000 100%);
			}
		}

		// 商品列表
		.goods {
			padding: 0 24rpx;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 22rpx;

			.goods-for {
				border-radius: 24rpx;
				overflow: hidden;
				// .num-width {
				// 	width: 164rpx !important;
				// }

			}

			.goods-com {
				padding: 24rpx 20rpx 24rpx 10rpx;
			}

			.goods-par {
				background: #FFE9D2;
				border-radius: 100rpx;
				padding: 6rpx 12rpx;
				color: #E38134;
				display: inline-block;

				.size-24 {
					margin: 0 2rpx;
				}
			}

			.goods-name {
				line-height: 38rpx;
			}

			.goods-chaos {
				margin-bottom: 32rpx;

				.font-weight-600 {
					margin-left: 10rpx;
				}

			}

			.goods-shou {
				margin: 20rpx 0 30rpx;
			}

			.yishou {
				color: #9E9E9E;
			}
		}

		.carts {
			width: 104rpx;
			height: 104rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 16rpx 6rpx rgba(0, 0, 0, 0.1);
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			position: fixed;
			left: 40rpx;
			bottom: 76rpx;
			z-index: 10000;

			.icon-gouwuche {
				font-size: 56rpx;
			}

			.icon-shiwu-gouwuche {
				font-size: 54rpx;
			}

			.swings {
				animation: swing .5s;
			}

			.carts-num {
				min-width: 30rpx;
				height: 30rpx;
				padding: 0 5rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				right: 16rpx;
				top: 16rpx;
				z-index: 100;
			}
		}

		.icon-gouwuche {
			top: 4rpx;
			left: -2rpx;
		}

		/* 定义关键帧动画 */
		@keyframes swing {

			0%,
			100% {
				transform: translateX(0);

			}

			25% {
				transform: translateX(-5px);
				/* 向左移动 */
			}

			75% {
				transform: translateX(5px);
				/* 向右移动 */
			}
		}

		// 动画
		.ball-box {
			width: 20rpx;
			height: 20rpx;
			// background: red;
			position: absolute;
			top: 0rpx;
			right: 0;
			z-index: 100;
			animation: moveX 1s linear none;
		}

		.ball {
			width: 20rpx;
			height: 20rpx;
			background: red;
			position: absolute;
			right: 0;
			z-index: 100;
			animation: moveY 1s cubic-bezier(0.55, 0, 0.85, 0.36) none;
		}

		@keyframes moveX {
			to {
				transform: translateX(-342px);
			}
		}

		@keyframes moveY {
			to {
				transform: translateY(692px);
			}
		}

		// 代买商品
		::v-deep.purchasing {
			padding: 0 24rpx;

			.u-textarea,
			.textarea {
				border: none !important;
				padding: 0 !important;
			}

			.input-placeholder {
				color: rgba(153, 153, 153, 0.8) !important;
				line-height: 60rpx !important;
			}

			.u-textarea__field {
				color: #333333 !important;
				width: 100%;
				height: 130rpx !important;
				background: #F1F5F8;
				border-radius: 24rpx;
				border: 1px solid rgba(234, 235, 237, 0.8);
				padding: 26rpx 25rpx !important;
				box-sizing: border-box;
				margin-bottom: 30rpx;
				line-height: 60rpx !important;
			}

			// 上传
			.upload-img {
				width: 144rpx;
				height: 144rpx;
				border-radius: 18rpx
			}

			.upload-file {
				margin-bottom: 30rpx;
			}
		}
	}
</style>